<template>
  <div class="login">
    <div type="primary" class="button" @click="handleClick">{{btnText}}</div>
  </div>
</template>

<script>
export default {
  props: ["btnText"],

  methods: {
    handleClick() {
      console.log("按钮被点击了");
      // 这里按钮子组件内部, 没法处理登录/注册需求
      // 只知道自己被点击, 需要通知父页面后续处理
      // 1. 子组件主动 emit 事件
      this.$emit("submit");
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  .button {
    outline: none;
    width: 318/360 * 100vw;
    height: 48/360 * 100vw;
    background-color: #cc3300;
    color: #fff;
    border-radius: 30/360 * 100vw;
    text-align: center;
    line-height: 48/360 * 100vw;
    border: 0;
    margin: 20/360 * 100vw auto;
    margin-top: 50/360 * 100vw;
  }
}
</style>